<template>
  <div
    ref="containerRef"
    class="reference-line-container"
    @mousemove="handleMouseMove"
    @click="handleClick"
  >
    <div
      class="horizontalLine"
      :style="{
        top: mousePosition.y + 'px'
      }"
    ></div>
    <div
      class="verticalLine"
      :style="{
        left: mousePosition.x + 'px'
      }"
    ></div>

    <div
      class="canvasPosition"
      :style="{
        top: mousePosition.y + 10 + 'px',
        left: mousePosition.x + 10 + 'px'
      }"
    >
      <span>X【{{ canvasPosition.x }}】</span>
      <span>Y【{{ canvasPosition.y }}】</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { canvas } from '@renderer/store/canvas/canvasInstance'
import { useCanvasParameterStore } from '@renderer/store/canvas/canvasParameter'
import { storeToRefs } from 'pinia'

// 容器 DOM 引用
const containerRef = ref<HTMLDivElement | null>(null)

// 鼠标位置状态
const mousePosition = reactive({ x: 0, y: 0 })
//画布坐标
const canvasPosition = reactive({ x: 0, y: 0 })

// 鼠标移动处理函数
const handleMouseMove = (event: MouseEvent) => {
  const container = containerRef.value
  if (!container) return

  const rect = container.getBoundingClientRect()
  mousePosition.x = event.clientX - rect.left
  mousePosition.y = event.clientY - rect.top

  const clientPosition = { x: event.clientX, y: event.clientY }
  const point = canvas.clientToLocal(clientPosition.x, clientPosition.y)
  canvasPosition.x = Number(point.x.toFixed(0))
  canvasPosition.y = Number(point.y.toFixed(0))
}

//处理点击事件
const handleClick = () => {
  const { isShiftRDown } = storeToRefs(useCanvasParameterStore())
  isShiftRDown.value = false
}
</script>

<style scoped lang="scss">
.reference-line-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  .horizontalLine {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #ff8a8a;
  }
  .verticalLine {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px dashed #ff8a8a;
  }

  .canvasPosition {
    position: absolute;
    color: #ed8a19;
    background-color: #f5faffc0;
    font-size: 13px;
    display: flex;
    flex-direction: column;
  }
}
</style>
